<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie= edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
        <title>Multiavatar - All 48 Initial Avatar Designs</title>

        <style>
            body, html {
                width:100%;
                height:100%;
            }
            
            body {
                background-color: #fff;
                overflow-x: hidden;
                padding:0px;
                margin:0px;
            }

            * {
                box-sizing: border-box;
            }

            .container {
                width: 100%;
                height: 100%;
                padding: 20px;
            }

            .avatar {
                width: 110px;
                height:110px;
                float:left;
                margin: 10px;
            }
        </style>

        <!-- DEVELOPMENT -->
        <script src="../multiavatar.js?v=015"></script>

        <!-- PRODUCTION -->
        <!-- <script src="../multiavatar.min.js?v=015"></script> -->
        
    </head>
    <body>

        <div id="container" class="container">
            <div id="a1" class="avatar"></div>
            <div id="a2" class="avatar"></div>
            <div id="a3" class="avatar"></div>
            <div id="a4" class="avatar"></div>
            <div id="a5" class="avatar"></div>
            <div id="a6" class="avatar"></div>
            <div id="a7" class="avatar"></div>
            <div id="a8" class="avatar"></div>
            <div id="a9" class="avatar"></div>
            <div id="a10" class="avatar"></div>
            <div id="a11" class="avatar"></div>
            <div id="a12" class="avatar"></div>
            <div id="a13" class="avatar"></div>
            <div id="a14" class="avatar"></div>
            <div id="a15" class="avatar"></div>
            <div id="a16" class="avatar"></div>
            <div id="a17" class="avatar"></div>
            <div id="a18" class="avatar"></div>
            <div id="a19" class="avatar"></div>
            <div id="a20" class="avatar"></div>
            <div id="a21" class="avatar"></div>
            <div id="a22" class="avatar"></div>
            <div id="a23" class="avatar"></div>
            <div id="a24" class="avatar"></div>
            <div id="a25" class="avatar"></div>
            <div id="a26" class="avatar"></div>
            <div id="a27" class="avatar"></div>
            <div id="a28" class="avatar"></div>
            <div id="a29" class="avatar"></div>
            <div id="a30" class="avatar"></div>
            <div id="a31" class="avatar"></div>
            <div id="a32" class="avatar"></div>
            <div id="a33" class="avatar"></div>
            <div id="a34" class="avatar"></div>
            <div id="a35" class="avatar"></div>
            <div id="a36" class="avatar"></div>
            <div id="a37" class="avatar"></div>
            <div id="a38" class="avatar"></div>
            <div id="a39" class="avatar"></div>
            <div id="a40" class="avatar"></div>
            <div id="a41" class="avatar"></div>
            <div id="a42" class="avatar"></div>
            <div id="a43" class="avatar"></div>
            <div id="a44" class="avatar"></div>
            <div id="a45" class="avatar"></div>
            <div id="a46" class="avatar"></div>
            <div id="a47" class="avatar"></div>
            <div id="a48" class="avatar"></div>
        </div>

        <div style="height:40px;clear:both;"></div>

        <script>     
            function getById(id) {
                return document.getElementById(id);
            }
            
            getById('a1').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'A'});
            getById('a2').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'B'});
            getById('a3').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'C'});
            getById('a4').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'A'});
            getById('a5').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'B'});
            getById('a6').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'C'});
            getById('a7').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'A'});
            getById('a8').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'B'});
            getById('a9').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'C'});
            getById('a10').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'A'});
            getById('a11').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'B'});
            getById('a12').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'C'});
            getById('a13').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'A'});
            getById('a14').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'B'});
            getById('a15').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'C'});
            getById('a16').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'A'});
            getById('a17').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'B'});
            getById('a18').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'C'});
            getById('a19').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'A'});
            getById('a20').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'B'});
            getById('a21').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'C'});
            getById('a22').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'A'});
            getById('a23').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'B'});
            getById('a24').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'C'});
            getById('a25').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'A'});
            getById('a26').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'B'});
            getById('a27').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'C'});
            getById('a28').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'A'});
            getById('a29').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'B'});
            getById('a30').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'C'});
            getById('a31').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'A'});
            getById('a32').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'B'});
            getById('a33').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'C'});
            getById('a34').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'A'});
            getById('a35').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'B'});
            getById('a36').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'C'});
            getById('a37').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'A'});
            getById('a38').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'B'});
            getById('a39').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'C'});
            getById('a40').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'A'});
            getById('a41').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'B'});
            getById('a42').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'C'});
            getById('a43').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'A'});
            getById('a44').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'B'});
            getById('a45').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'C'});
            getById('a46').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'A'});
            getById('a47').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'B'});
            getById('a48').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'C'});
        </script>
    </body>
</html>
